<html><head lang="en">
    <meta charset="UTF-8">
    <title>微信在线投票系统</title>
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/jquery.hotkeys.js"></script>
	<script src="js/fullscreen.js"></script>
<style>
	html,body{
		width:100%;
		height:100%;
		margin:0;padding:0;
		overflow: hidden;
		font-family: "microsoft yahei", Helvetica, Arial, sans-serif;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}
	.bg{
		width:100%;
		height:100%;
		background:#333;
		position:absolute;
		z-index:-1;
	}
	.bg > img{
		width:100%;
		height:100%;
	}
	/*柱子属性.left:可以控制柱子的位置 , 比如: 9:6(63%) 和 4:3 (53%) 距离需要控制 */
	.data1{
        width:100%;
        height:35px;
        position:absolute;
        z-index: 10;
        font-weight: bold;
        top:21%;
        font-size: 32px;
       
        text-align: center;        
        box-sizing: border-box;
		 
    }
	.data1 .data1_1{ 	
	    width: 700px;
        /*float: left;*/
		/*margin: 0 auto;	 */

	}
    .data1 .data1_1 .start_end_label {
    	float: right;
    	letter-spacing:4px;
    	margin-right: -350px;
        margin-top:560px ;
    	width: 208px;
        font-size: 30px;
        /*margin-bottom: 50px;*/
    }
    .data1 .data1_1 .dao_jishi{
    	color: red;
    	float: right;
    	margin-right: -460px;
        margin-top: 510px;
    }
    .data{
        width: 450px;
        height:300px;
        position:absolute;
        z-index: 10;
        border-bottom:1px solid;
        bottom:20%;
        left:53%;
        box-sizing: border-box;
    }
    .data > span {
        display: inline-block;
        position:absolute;
        width:35px;
        background:#000;
        bottom:0;

    }
   /*百分比属性*/
   .data > span >span:nth-child(1){
         position:absolute;
         width:100px;height:35px;line-height:35px;text-align: center;
         top:-60px;
         left:-33px;
         font-weight: bold;
     }
     /*票数属性*/
	 .data > span >span:nth-child(2){
         position:absolute;
         width:100px;height:35px;line-height:35px;text-align: center;
         top:-35px;
         left:-33px;
         font-weight: bold;
     }
     .data > span >span:nth-child(3){
         position:absolute;
         width:35px;height:15px;line-height:35px;text-align: center;
         font-weight: bold;
         bottom:-15px;
         left:-1px;

     }
    .countBox{
        position:absolute;
        width:100%;
        line-height:50px;
        bottom:1.5%;
        box-sizing: border-box;
        text-align:right;
        padding-right:10%;
        font-size:25px;
        font-weight: bold;

    }
    #index{
        display: block;
        position: absolute;
        color:red;
        font-weight: bold;
        font-size:25px;
        right:-15px;
        bottom:18px;
    }
    
    .space_value{
        display: block;
        position: absolute;
        color:black;
        font-weight: bold;
        font-size:18px;
        right:55px;
        bottom:18px;
        line-height: 30px;
    }
	/*实现边角翻折*/
	#paper_top_right{
		position:absolute;
		height:30px;
		width:30px;
		top:0;
		right:0;
		background:#333;
	}
	#paper_top_right > img{
		width:100%;
		height:100%;
	}
	#paper_top_right_animate{
		height:30px;
		width:30px;
		position:absolute;
		background:linear-gradient(45deg,#D7D7D7,#E2E2E2 20%,#FFFFFF 35%,#D5D5D5 50%,transparent 50%,transparent);
		border-bottom-left-radius:10px 90px;
		border-bottom-right-radius:100px 1px;
		box-shadow:-3px 2px 5px #333333;
		top:0;
		right:0;
		z-index:1;
		cursor:pointer;
	}
	.mark{
			position:absolute;width:100%;height:100%;
			background:rgba(51,51,51,0.5);
			z-index:9999;top:0;left:0
		}
		.mark > div{
			position:absolute;
			width:600px;
			height:580px;
			background:#FFFFFF;
			top:50%;left:50%;margin-top:-300px;margin-left:-300px;
			border-radius:20px;
			
		}
		.mark > div > img{
			width:450px;height:450px;
			margin-left:75px;margin-top:60px;
		}
		.mark > div > p{
			font-weight:bold;
			font-size:16px;
			margin-top:15px;
			text-align:center;
		}
		.mark > div > span{
			display:block;
			position:absolute;
			top:20px;right:25px;
			font-size:25px;
			color:#c0c0c0;
			font-weight:bold;
			cursor:pointer;
		}
		.mark > div > span:after{
			content:"";
			position:absolute;width:30px;height:30px;
			border-radius:50%;
			background:rgba(51,51,51,.6);
			top:4px;left:-5px;
			
		}
		.mark > div > span:hover{
			color:#000;
		}

</style></head>

<body>
    <div class="bg"><img src="bgImg/1.jpg"></div>
     <div class="data1">
         <div class="data1_1">
         	 <span id="space_value" class="start_end_label">停止投票</span>
         	 <span id="sdt1" class="dao_jishi">24:00:00</span> 
         </div>
    </div>
    <div class="data" style="opacity: 1; border-bottom-color: rgb(192, 192, 192);"><span style="font-size: 22px; left: 85px; height: 0%; background: rgb(95, 205, 234);"><span style="color:red;display:none;">0%</span><span style="color:red">0</span><span style="color:#333">1</span></span><span style="font-size: 22px; left: 195px; height: 0%; background: rgb(107, 208, 49);"><span style="color:red;display:none;">0%</span><span style="color:red">0</span><span style="color:#333">2</span></span><span style="font-size: 22px; left: 305px; height: 100%; background: rgb(191, 221, 248);"><span style="color:red;display:none;">100%</span><span style="color:red">1</span><span style="color:#333">3</span></span></div>
    <div class="countBox">
        <span style="opacity: 0">答案 : <span id="answer" style="color:red;">1</span></span>

        &nbsp;&nbsp;&nbsp;
        <span style="opacity: 0">Vote : <span id="count" style="color:red;">1</span></span>
        &nbsp;&nbsp;&nbsp;
        <span style="color:red;"> &nbsp;<span id="sdt" style="display: none;">86400</span>  </span>
    </div>
  
    <span id="index">1</span>

	<!--实现页面边角翻折-->
	
	<div id="paper_top_right">
		<!--边角二维码-->
		<img src="bgImg/ewm.jpg">
		<div id="paper_top_right_animate"></div>
	</div>
	<!--按键显示大的二维码-->
	<div class="mark" style="display:none">
		<div>
			 <img src="bgImg/ewm.jpg">
			 <p>扫描二维码 参与屏幕互动</p>
			 <span>×</span>
		</div>
	</div>


<script>
	
	var sdt = false;//是否开始计时

	var _interval ;
	var getData ;

	//当前投票题目固定信息,只有切换题目时才会更换
	var currentQuestionId ;	//当前题目的编号 (固定值)
	var answer ; 	//当前题目的正确答案 (固定值)

	//获取当前题目的正确答案
	function getCurrentVoteRightAnswer(){
		$.ajax( {
			url : 'getCurrentVoteRightAnswer?currentQuestionID=' + currentQuestionId ,
			type : 'post' ,
			datatype : 'json' , 
			async: false , 	//同步
			success : function( data ){
				console.info('获取当前题目的正确答案 =' + data );
				answer = data ;
			} ,
			error : function(){
				console.info( '获取当前题目的正确答案失败' );
				//$("#index").html( '服务器连接不上,无法识别' );
			}
		});
	}

	function formatSeconds(value) { 
		var theTime = parseInt(value);// 秒 
		var theTime1 = 0;// 分 
		var theTime2 = 0;// 小时 
 
		if(theTime > 60) { 
			theTime2 = parseInt(theTime/60); 
			theTime1 = parseInt(theTime/60); 
			theTime = parseInt(theTime%60); 
			if(theTime1 > 60) { 
				theTime2 = parseInt(theTime1/60); 
				theTime1 = parseInt(theTime1%60); 
			} 
		}
		 var result = '';
		 if(theTime>=10){
			 result = ""+parseInt(theTime); //秒
		 }else{
			 result = "0"+parseInt(theTime); //秒
		 }		 
		if(theTime1 >= 0) { //分
			if(theTime1<10){
				result = "0"+parseInt(theTime1)+":"+result; 
			}else{
				result = ""+parseInt(theTime1)+":"+result; 
			}
		}
		if(theTime2 > 0) { //小时
		  result = ""+parseInt(theTime2)+":"+result; 
		} 
		return result; 
   } 


 

	
	//以下数据需要实时刷新
	var ids = [];	//当前题目答案的所有编号
	var values = [];	//当前题目答案编号对应的投票数量
	var count ;	//当前题目的投票总量
	
    
 	//获取当前投票的信息
 	//1 : 当前问题的答案编号 , 如 : A , B , C , D 
	//2 : 答案对应的投票数量 , 如 : A : 10 , B : 20 , C : 15
	//3 : 总投票数量 
	function getCurrentVoteInfo(){
		$.ajax( {
			url : 'getCurrentVoteInfo?currentQuestionID=' + currentQuestionId ,
			type : 'post' ,
			datatype : 'json' , 
			async: false , 	//同步
			success : function( data ){
				console.info('获取当前投票数据');
				console.info( data );
				var json = jQuery.parseJSON( data );	//转换为json对象
				console.info( json.voteCount );
				ids = json.ids ;
				values = json.values ;
				count = json.voteCount ;
			} ,
			error : function(){
				console.info( '获取当前投票数据失败' );
				//$("#index").html( '服务器连接不上,无法识别' );
			}
		});
		
	}

	
    $(function(){
		//初始化页面操作
		//1 : 初始化投票的状态,设置投票编号为1
		//2 : 设置前台投票器显示内容为 1 
		//3 : 设置当前投票编号为 1
				
		$.ajax( {
				url : 'initVoteState' ,
				type : 'post' ,
				datatype : 'json' , 
				async: false , 
				success : function( data ){
					console.info('初始化投票状态成功');
					$("#index").html( 1 );
					currentQuestionId = 1 ;
				} ,
				error : function(){
					console.info( '初始化投票状态,加载失败' );
					//$("#index").html( '服务器连接不上,无法识别' );
				}
		});

		getCurrentVoteRightAnswer();
		
		getCurrentVoteInfo();
		
        //默认加载哪一题
        //获得题目的数据 ids values 图片背景图相对页面位置 总投票数量 正确答案
        //成功获得以后执行绘制 渲染方法
        //数组的添加方法为 Array.push(item);
        //换背景图片 也就是换题
        //$(".bg").html(""<img src='"+图片的路径放到这里+"'/>"");
        console.info("set count = " + count );
        $("#count").html( count );
        console.info("set answer = " + answer );
        $("#answer").html( answer );
        $("#index").html( currentQuestionId ); //获得题目Id赋值给他 题目Id将在页面右下角展示
        changeBgImg();
        //调用柱状图绘制方法
        /**
         * 参数列表
         *
         * ids 数组类型 显示几个柱状图 数组元素就有几个 同时对应柱状图底下的数字标识
         * 例如 ids:[1,2]
         * values 数组类型 对应ids中每一个柱状图的值
         * 例如 values:[10,20]
         * background 数组类型 对应ids中每一个柱状图的颜色 没有赋值则使用默认值
         * 例如 background:["red","#0080FF"]
         * tnc 字符串类型 对应柱状图上方数字颜色 不设置则为默认颜色
         * 例如 tnc:"#0080FF"
         * bnc 字符串类型 对应柱状图下方数字颜色 不设置为默认颜色
         * 例如 bnc:"#0080FF"
         * lc 字符串类型 对应柱状图底下那根弦的颜色 不设置则为默认颜色
         * 例如 lc:"#0080FF"
         * fs 字符串类型 对应字体大小 不设置为默认大小
		 * pc 字符串类型 对应百分比颜色 不设置为默认颜色 pc:"red"
         */
        $(".data").chart({
            ids: ids ,
            values: values ,
            lc:"#c0c0c0",
            fs:"18px"
        });
        //渲染图形 必须执行此方法
        /**
         * 参数列表
         * animate 启用动画 值为 true or false 默认为false
         * one 一个柱状图时候的 间隔和 柱状图据边界的left值
         *    例如 one:{"left":"填写间隔值 int类型","mf":"柱状图据左边的值 int类型"}
         * two 同上
         *  ...
         * nine 同上
         * ten 同上
         *
         */
        $(".data").draw({
            animate:true
        });
        //绑定页面默认按键
        /**
         *
             w 上一题 wFunc();
             s 下一题 sFunc();
             空格 开始和停止投票 spaceStartFunc(); 开始执行 spaceStopFunc(); 停止执行
             t 投票人数显示和隐藏
             d 答案显示和隐藏
             c 清空本体投票数据，同时倒计时恢复初始时间 cFunc();
			 m 显示二维码
			 f 全屏
         */
        bindDocumentKeys();
		pageTopRightAnimate();//绑定页面翻角悬浮事件
		showEwm();//按键显示二维码
    });

	function changeBgImg(){
		//获得题目背景图片的相对位置
		var image = 'bgImg/' + currentQuestionId + '.jpg';
		//替换背景图片
        $(".bg").html("<img src='"+image+"'/>");
	}

	//更新当前问题的编号
	function updateCurrentQuestionID(updateQuestionId){
		 $.ajax( {
				url : 'updateCurrentQuestionID?updateQuestionId=' + updateQuestionId ,
				type : 'post' ,
				datatype : 'json' , 
				async: false , 
				success : function( data ){
					console.info('更新的编号为=' + updateQuestionId + ",结果为=" + data );
					currentQuestionId = parseInt( data ) ;
				} ,
				error : function(){
					console.info( '更新当前问题的编号,加载失败' );
					//$("#index").html( '服务器连接不上,无法识别' );
				}
			});
	}
	
    function wFunc(){//w 快捷键 上一页
        console.log("w up");
        //获得题目Id
        //var index = $("#index").html();//当前题目的Id 上一题则 -1
        
        var updateQuestionId ;
     
        if ( currentQuestionId > 0 ){
        	updateQuestionId = currentQuestionId - 1 ;
        } else {
        	updateQuestionId = currentQuestionId ;
        }
       
		
        updateCurrentQuestionID(updateQuestionId);
		        
       	changeBgImg();

       	$("#index").html( currentQuestionId ); //获得题目Id赋值给他 题目Id将在页面右下角展示

       	changeQuestionClearData();

       	getCurrentVoteRightAnswer();
        getCurrentVoteInfo();
            
        //重新绘制图形
        $(".data").chart({
            ids:ids,
            values:values
        });
        //重新渲染
        $(".data").draw();
        
        //赋值正确答案
        $("#answer").html( answer );
        //赋值总票数
        $("#count").html( count );
    }
    
    function sFunc(){//s 快捷键 下一页
        console.log("s down");
        
        var updateQuestionId = currentQuestionId + 1 ; //当前要更新的编号,是否越界,后台判断,如果越界就不修改
        
        updateCurrentQuestionID(updateQuestionId);

        changeBgImg();

        $("#index").html( currentQuestionId ); //获得题目Id赋值给他 题目Id将在页面右下角展示

        changeQuestionClearData();

        getCurrentVoteRightAnswer();
        getCurrentVoteInfo();
		
      	//重新绘制图形
        $(".data").chart({
            ids:ids,
            values:values
        });
        //重新渲染
        $(".data").draw();
        
        //赋值正确答案
        $("#answer").html( answer );
        //赋值总票数
        $("#count").html( count );
    }

    //切换题目时,清空一些数据
    //1 : 倒计时
    //2 : 定时扫描数据
    //3 : 还原定时器
	function changeQuestionClearData(){
		clearInterval(_interval);//倒计时计时器
        clearInterval(getData);//获取数据计时器
        //还原倒计时
        $("#sdt").html("86400");
        var d = formatSeconds(86400);
        $("#sdt1").html(d);
        sdt = false ;
	}
	    
    function cFunc(){//c 快捷键 清空数据
        console.log("c down " + currentQuestionId );
        //执行清空事件
        //清空计时器
        clearInterval(_interval);//倒计时计时器
        clearInterval(getData);//获取数据计时器
        //还原倒计时
        $("#sdt").html("86400");
        var d = formatSeconds(86400);
        $("#sdt1").html(d);
        //执行清空数据操作
        //var index = $("#index").html();//这是题目的Id
        //do something
		//清除当前题目投票数据
        
        $.ajax( {								 
			url : 'deleteCurrentQuestionVoteData?currentQuestionID=' + currentQuestionId ,
			type : 'post' ,
			datatype : 'json' , 
			async: false , 	//同步
			success : function( data ){
				console.info( '-------' + data );
			} ,
			error : function(){
				alert( '删除当前投票数据,加载失败' );
			}
		});
		
 		getCurrentVoteInfo();
		
      	//重新绘制图形
        $(".data").chart({
            ids:ids,
            values:values
        });
        //重新渲染
        $(".data").draw();
        
        //赋值正确答案
        $("#answer").html( answer );
        //赋值总票数
        $("#count").html( count );
    }

    //启动投票
	function openVoteHandle(){
	  	$.ajax( {
			url : 'openVoteFuc' ,
			type : 'post' ,
			datatype : 'json' , 
			success : function( data ){
				console.info('开启投票成功,可以投票了!');
				 $('#space_value').html('开始投票');
			} ,
			error : function(){
				alert( '加载失败' );
			}
		});
	}

    //关闭投票
	function closeVoteHandle(){
		$.ajax( {
			url : 'closeVoteFuc' ,
			type : 'post' ,
			datatype : 'json' , 
			success : function( data ){
				console.info('关闭投票成功,当前不可以投票!');
				 $('#space_value').html('停止投票');
			} ,
			error : function(){
				alert( '加载失败' );
			}
		});
	}
    

	//空格开始事件
    function spaceStartFunc(){
        
		//1 : 开启投票功能
	    openVoteHandle();
		
        // 持续获取数据
        getData = setInterval( function(){

        	getCurrentVoteInfo();
            
            //获得题目Id
            //使用ajax 获得ids values 重新绘制 和 渲染图形
            //获得ids 和 values 使用 ids.push(xx);或者 values.push(yy);方法向数组中添加元素
            //重新绘制图形
            $(".data").chart({
                ids:ids,
                values:values
            });
            //重新渲染
            $(".data").draw();
            //将投票总数赋值到页面中
            $("#count").html( count );
        },2000);// 1 秒执行一次
		//刷新频率

    }
    function spaceStopFunc(){
        //停止投票
        closeVoteHandle();

        
        //空格停止时间 也是倒计时完成事件
        //停止获取数据计时器
        clearInterval(getData);
    }
	//二维码显示事件
	function showEwm(){
		$("#paper_top_right_animate").click(function(){
			$(".mark").toggle();
		});
		$(".mark span").click(function(){
			$(".mark").toggle();
		});
	}
	//边角二维码显示事件
	function pageTopRightAnimate(){
		$("#paper_top_right_animate").hover(
			function(){
				$(this).stop(true,false).animate({"height":"60px","width":"60px"},500);
				$(this).parent().stop(true,false).animate({"height":"55px","width":"55px"},500);
			},
			function(){
				$(this).stop(true,false).animate({"height":"30px","width":"30px"},500);
				$(this).parent().stop(true,false).animate({"height":"30px","width":"30px"},500);
			}
		);
	}

    //绑定页面默认按键
    function bindDocumentKeys(){
        console.info( 'bindDocumentKeys currentQuestionID =' + currentQuestionId );
        var pillarShow = false ;
        //显示珠子快捷键
        $(document).bind('keydown', 'r',function (evt){
            if( pillarShow ){
                $(".data").css("opacity","1");
                pillarShow = false;
            }else{
                $(".data").css("opacity","0");
                pillarShow = true;
            }
            return false;
        });
        
        var tisShow = true;
        //显示投票快捷键
        $(document).bind('keydown', 't',function (evt){
            if(tisShow){
                $("#count").parents("span").css("opacity","1");
                tisShow = false;
            }else{
                $("#count").parents("span").css("opacity","0");
                tisShow = true;
            }
            return false;
        });
        
        var disShow = true;
        $(document).bind('keydown', 'd',function (evt){
            if(disShow){
                $("#answer").parents("span").css("opacity","1");
                disShow = false;
            }else{
                $("#answer").parents("span").css("opacity","0");
                disShow = true;
            }
            return false;
        });
        
        $(document).bind('keydown', 'space',function (evt){
            console.log("space click , sdt =" + sdt );
            if(sdt == false){
                sdt = true;
                console.log("start counttime");
                spaceStartFunc();//执行空格按键事件
                _interval = setInterval(function(){
                    var time = parseInt($("#sdt").html());
                    time--;
                    //倒计时完成
                    if(time == -1){
                        console.log("interval success");
                        spaceStopFunc();//执行倒计时完成事件
                        clearInterval(_interval);
                        return false;
                    }
                    if(time<10){
                        time = "0"+time;
                    }
                    $("#sdt").html(time);
                    var d = formatSeconds(time);
                    $("#sdt1").html(d);
                },1000);
            }else{
                console.log("shutdown counttime");
                clearInterval(_interval);
                spaceStopFunc();//执行倒计时完成事件
                sdt = false ;
            }
            return false;
        });
        $(document).bind('keydown', 'w',function (evt){
           wFunc();
            return false;
        });
        $(document).bind('keydown', 's',function (evt){
           sFunc();
            return false;
        });
        $(document).bind('keydown', 'c',function (evt){
            cFunc();
            return false;
        });
		$(document).bind('keydown', 'm',function (evt){
            $(".mark").toggle();
            return false;
        });
		$(document).bind('keydown', 'f',function (evt){
            $.toggleFullScreen();
            return false;
        });
    }

        ;(function($){
            var vs,max=0;
			var overPrec = 0;
			var overPrecIsFinish = false;//表示补全数据是否完成
            $.fn.extend({
                //生成图形方法
                 /**
		         * 参数列表
		         *
		         * ids 数组类型 显示几个柱状图 数组元素就有几个 同时对应柱状图底下的数字标识
		         * 例如 ids:[1,2]
		         * values 数组类型 对应ids中每一个柱状图的值
		         * 例如 values:[10,20]
		         * background 数组类型 对应ids中每一个柱状图的颜色 没有赋值则使用默认值
		         * 例如 background:["red","#0080FF"]
		         * tnc 字符串类型 对应柱状图上方数字颜色 不设置则为默认颜色
		         * 例如 tnc:"#0080FF"
		         * bnc 字符串类型 对应柱状图下方数字颜色 不设置为默认颜色
		         * 例如 bnc:"#0080FF"
		         * lc 字符串类型 对应柱状图底下那根弦的颜色 不设置则为默认颜色
		         * 例如 lc:"#0080FF"
		         * fs 字符串类型 对应字体大小 不设置为默认大小
				 * pc 字符串类型 对应百分比颜色 不设置为默认颜色 pc:"red"
		         */
                "chart":function(options){
                    var defaults = {
                        ids:[],
                        values:[],
                        background:["#5fcdea","#6bd031","#bfddf8","#3cb7f9","#ed515e","#094ab1","#89fc72","#50abfd","#f9992f"] ,
						pc:"red",
                        tnc:"red",
                        bnc:"#333",
                        lc:"#c0c0c0",
                        fs:"22px"

                    };
                    var ops = $.extend(defaults,options);
                    $(this).css("border-bottom-color",ops.lc);

					$(this).html("");

					//获得总投票数量
					var voteCount = 0 ;
					for(var i = 0 ; i < ops.values.length;i++){
						voteCount += ops.values[i];
					}
                    //重新尽心绘制方法时候 补位标识为false
					overPrecIsFinish = false;
					var precCount = 0;
                    for(var i = 0 ; i<ops.ids.length;i++){
							var prec =  0 ;
						//投票总数不为0 
						if(voteCount != 0){
							//获得百分比
							prec = (ops.values[i]/voteCount)*100;
							if(prec.toString().indexOf(".")!=-1){
								prec = prec.toString().substring(0,prec.toString().indexOf(".")+2)+"%";
							}else{
								prec+="%";
							}
							//获得百分比
							var precItem = prec.substring(0,prec.indexOf("%"));
							console.log(precItem);
							precCount += parseFloat(precItem);
							//如果为最后一位
							if(i == ops.ids.length-1){
								//判断如果最后一个柱子的值不为0 则进行补位
								//否则拿到需要补位的值 补给最后一个有数据的柱子
								if(parseFloat(precItem) != 0){
									prec = 100 - precCount + parseFloat(precItem);
									prec = Math.round(prec*100)/100 + "%";
								}else{
									overPrec = 100 - precCount;
								}
							}
						}else{
							prec = "";
						}
                        var spanitem = "<span style='background:"+ops.background[i]+";'><span style='color:"+ops.pc+";display:none;'>"+prec+"</span><span style='color:"+ops.tnc+"'>"+ops.values[i]+"</span><span style='color:"+ops.bnc+"'>00"+ops.ids[i]+"</span></span>";
                        $(this).append(spanitem);
                        //判断values中的最大值 赋予max
                        if(ops.values[i] > max){
                            max = ops.values[i];
                        }
                    }
                    $(this).children("span").css("font-size",ops.fs);
                    vs = ops.values;
                },
                //渲染方法
                "draw":function(margins){
                    var defaults = {
                        animate:false,
                        one:null,
                        two:{"left":"120","mf":"117"},
                        three:{"left":"75","mf":"85"},
                        four:{"left":"75","mf":"40"},
                        five:{"left":"50","mf":"35"},
                        six:{"left":"42","mf":"15"},
                        seven:{"left":"29","mf":"16"},
                        eight:{"left":"20","mf":"15"},
                        nine:{"left":"15","mf":"8"},
                        ten:{"left":"10","mf":"5"}
                    };
                    var ops = $.extend(defaults,margins);
                    var len = $(this).children("span").length;
                    var mf,left;
                    switch(len){
                        case 2:
                            mf=ops.two.mf;left=ops.two.left;
                            break;
                        case 3:
                            mf=ops.three.mf;left=ops.three.left;
                            break;
                        case 4:
                            mf=ops.four.mf;left=ops.four.left;
                            break;
                        case 5:
                            mf=ops.five.mf;left=ops.five.left;
                            break;
                        case 6:
                            mf=ops.six.mf;left=ops.six.left;
                            break;
                        case 7:
                            mf=ops.seven.mf;left=ops.seven.left;
                            break;
                        case 8:
                            mf=ops.eight.mf;left=ops.eight.left;
                            break;
                        case 9:
                            mf=ops.nine.mf;left=ops.nine.left;
                            break;
                        case 10:
                            mf=ops.ten.mf;left=ops.ten.left;
                            break;
                    }
					var isNeedOverPrecThis = null;//标识需要补位的柱子
                    //循环遍历$(this)的子类span 渲染图形位置
                    $(this).children("span").each(function(index){
                        var spanLeft = parseInt(mf) + 35*index + parseInt(left)*index;
                        var spanHeight = (vs[index]/max)*100+"%";

                        console.log("spanLeft:"+spanLeft);
                        console.log("spanHeight:"+spanHeight);
                        $(this).css("left",spanLeft+"px");
                        if(ops.animate){
                            $(this).animate({height:spanHeight},300);
                        }else{
                            $(this).css("height",spanHeight);
                        }

						//获得百分比 数值补上超出部分
						var prec = $(this).find("span:first").html();
						prec = prec.substring(0,prec.indexOf("%"));
						if(parseFloat(prec) == 0){
							//如果该项为0 则寻找上一项百分比
							//如果前面没有完成补全数据
							if(!overPrecIsFinish){
								isNeedOverPrecThis= $(this);
								//标识已经完成补位
								overPrecIsFinish = true;
							}
						}else{
							//如果遇到0后面有数值得情况
							//补位标识为false
							overPrecIsFinish = false;
						}

                    });
                    if ( isNeedOverPrecThis != null ) {
						var prevPrec = isNeedOverPrecThis.prev().find("span:first").html();
						if ( typeof(prevPrec) != "undefined" ){
							prevPrec = prevPrec.substring(0,prevPrec.indexOf("%"));
							prevPrec = parseFloat(prevPrec) + overPrec;
							prevPrec = Math.round(prevPrec*100)/100 + "%";
							isNeedOverPrecThis.prev().find("span:first").html(prevPrec);
						}
					}
					
                }

            });
        })(jQuery);


</script>

</body></html>